<template>
  <div class="detail-debug-container">
    <h2>产品明细调试页面</h2>
    
    <el-card class="debug-card">
      <template #header>
        <div class="card-header">
          <span>调试产品明细数据获取</span>
        </div>
      </template>
      
      <div class="debug-form">
        <el-form :model="debugForm" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="入库单号">
                <el-input v-model="debugForm.entryOrderNumber" placeholder="请输入入库单号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <el-button type="primary" @click="debugGetDetails" :loading="loading">
                  获取明细数据
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      
      <div class="debug-results">
        <h3>调试结果：</h3>
        <el-input
          v-model="debugResult"
          type="textarea"
          :rows="30"
          placeholder="调试结果将显示在这里..."
          readonly
        />
      </div>
      
      <div class="debug-table" v-if="detailsData.length > 0">
        <h3>明细数据表格：</h3>
        <el-table :data="detailsData" border style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="productDetailId" label="ProductDetailId" width="120" />
          <el-table-column prop="productId" label="ProductId" width="100" />
          <el-table-column prop="productName" label="产品名称" width="150" />
          <el-table-column prop="productNumber" label="产品编号" width="120" />
          <el-table-column prop="productCode" label="ProductCode" width="120" />
          <el-table-column prop="inventoryUnit" label="InventoryUnit" width="100" />
          <el-table-column prop="unit" label="Unit" width="80" />
          <el-table-column prop="num" label="Num" width="80" />
          <el-table-column prop="inventoryQuantity" label="InventoryQuantity" width="120" />
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button size="small" @click="showDetailInfo(scope.row)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getInboundOrderDetails } from '@/api/warehouseReceipt'

const debugResult = ref('')
const loading = ref(false)
const detailsData = ref<any[]>([])

// 调试表单数据
const debugForm = reactive({
  entryOrderNumber: 'RK20250821135836262'
})

const logResult = (title: string, result: any) => {
  const timestamp = new Date().toLocaleString()
  const resultStr = JSON.stringify(result, null, 2)
  debugResult.value = `[${timestamp}] ${title}:\n${resultStr}\n\n${debugResult.value}`
}

// 调试获取明细数据
const debugGetDetails = async () => {
  loading.value = true
  try {
    logResult('开始调试获取明细数据', debugForm.entryOrderNumber)
    
    const response = await getInboundOrderDetails(debugForm.entryOrderNumber)
    logResult('API响应结果', response)
    
    if (response.code === 200 && Array.isArray(response.data)) {
      logResult('获取到的明细数据', response.data)
      
      // 处理明细数据
      detailsData.value = response.data.map((d: any) => {
        // 尝试多种可能的ID字段名
        const recordId = d.id || d.productDetailId || d.detailId || d.productId || null
        
        logResult(`明细记录 ${d.productName} 的ID信息`, {
          originalId: d.id,
          productDetailId: d.productDetailId,
          detailId: d.detailId,
          productId: d.productId,
          finalId: recordId,
          productName: d.productName
        })
        
        return {
          // 保存原始ID字段 - 尝试多种可能的字段名
          id: recordId,
          productDetailId: recordId, // 兼容字段名
          
          productId: d.productId || d.id,
          productName: d.productName,
          productCode: d.productNumber || d.productCode,
          productSpecification: d.productSpecification || '',
          unit: d.inventoryUnit || d.unit,
          productAttribute: d.productAttribute || '',
          processRoute: d.processRoute || '',
          maxInventory: d.maxInventory || 0,
          minInventory: d.minInventory || 0,
          safetyStock: d.safetyInventory || d.safetyStock || 0,
          currentInventory: d.current || d.currentInventory || 0,
          num: d.num || d.inventoryQuantity || 1,
          createdBy: d.createdBy || 'admin',
          createdTime: d.createdTime || new Date().toISOString()
        }
      })
      
      logResult('处理后的明细数据', detailsData.value)
      ElMessage.success(`成功获取 ${detailsData.value.length} 条明细数据`)
    } else {
      logResult('API返回数据格式不正确', response)
      ElMessage.warning('未获取到明细数据')
      detailsData.value = []
    }
  } catch (error: any) {
    logResult('调试失败', error)
    ElMessage.error('调试失败')
    detailsData.value = []
  } finally {
    loading.value = false
  }
}

// 显示明细详情
const showDetailInfo = (row: any) => {
  logResult(`明细详情 - ${row.productName}`, row)
  ElMessage.info(`已显示 ${row.productName} 的详细信息`)
}
</script>

<style scoped>
.detail-debug-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.debug-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.debug-form {
  margin-bottom: 20px;
}

.debug-results {
  margin-bottom: 20px;
}

.debug-results h3 {
  margin-bottom: 12px;
  color: #303133;
}

.debug-table {
  margin-top: 20px;
}

.debug-table h3 {
  margin-bottom: 12px;
  color: #303133;
}
</style>

